<!-- eslint-disable vue/valid-v-else-if -->
<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input
                v-model="searchParam.SEARCH_LIKE_name"
                placeholder="请输入关键字"
                style="width: 200px;"
                class="filter-item"
                @keyup.enter.native="handleFilter"
            />
            <el-button
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
            >
                搜索
            </el-button>
            <el-button
                class="filter-item"
                type="default"
                icon="el-icon-search"
                @click="searchReset"
            >
                重置
            </el-button>
            <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-edit"
                @click="handleCreate"
            >
                新增
            </el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="tableList"
            border
            fit
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column
                v-for="column in columns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :align="column.align ? column.align : 'center'"
                :min-width="column.minWidth"
                :sortable="column.sortable"
                :fixed="column.fixed"
                :type="column.type"
                :formatter="column.formatter"
            >
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img
                        v-if="column.imgFlag == true"
                        :src="
              scope.row[column.prop].indexOf('http://') > -1
                ? scope.row[column.prop]
                : CMBASE.baseFileContext +
                  scope.row[column.prop]
            "
                        width="60"
                        height="60"
                        class="img"
                        alt=""
                    >
                    <!-- 行内显示开关按钮 -->
                    <el-switch
                        v-else-if="column.switchFlag == true"
                        v-model="scope.row[column.prop]"
                        :active-value="1"
                        :inactive-value="0"
                        disabled
                    />
<!--                    <span v-else-if="column.formatter">{{ column.formatter(scope.row) }}</span>-->
<!--                    <span v-else>{{ scope.row[column.prop] }}***</span>-->
                    <!-- 行内显示tag标签 -->
                    <span v-if="column.tagFlag == true">
            <span
                v-for="item in column.tagFormatter"
                :key="item.value"
            >
              <el-tag
                  v-if="item.value == scope.row[column.prop]"
                  :type="item.type"
              >{{ item.text }}</el-tag>
            </span>
          </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter">
            {{ column.formatter(scope.row) }}</span>
                    <!--默认显示文本-->
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="设置" width="380" align="center">
                <template v-if="!scope.row.children" slot-scope="scope">
                    <el-button
                        type="published"
                        @click="skuSet(scope.row)"
                    >规格列表
                    </el-button>
                    <el-button
                        type="published"
                        @click="spuSet(scope.row)"
                    >参数列表
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                align="center"
                width="240"
                class-name="small-padding"
            >
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleUpdate(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        @click="handleDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination
            v-show="tableTotal > 0"
            :total="tableTotal"
            :page.sync="pageRequest.pageNum"
            :limit.sync="pageRequest.pageSize"
            @pagination="getList"
        />

        <!--新增编辑界面-->
        <el-dialog
            :title="operation ? '新增' : '编辑'"
            width="45%"
            top="5vh"
            :visible.sync="dialogFormVisible"
            :close-on-click-modal="false"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="140px"
                :rules="dataFormRules"
                style="width: 80%"
            >
                <el-form-item label="分类名称" prop="name">
                    <el-input
                        v-model="dataForm.name"
                        auto-complete="off"
                        placeholder="请输入分类名称"
                    />
                </el-form-item>
                <el-form-item label="图标资源" prop="icon">
                    <cm-upload v-model="dataForm.icon"/>
                </el-form-item>
                <el-form-item label="排序号码" prop="orderNo">
                    <el-input
                        v-model="dataForm.orderNo"
                        auto-complete="off"
                        placeholder="请输入排序号码"
                    />
                </el-form-item>
                <el-form-item label="备注信息" prop="remark">
                    <el-input
                        v-model="dataForm.remark"
                        auto-complete="off"
                        placeholder="请输入备注信息"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="mini"
                    @click.native="closeDialog()"
                >取消
                </el-button>
                <el-button
                    size="mini"
                    :loading="editLoading"
                    type="primary"
                    @click.native="saveFormData()"
                >提交
                </el-button>
            </div>
        </el-dialog>

        <!--规格列表-->
        <el-dialog
            title="商品规格"
            width="60%"
            :modal-append-to-body="false"
            top="10vh"
            :visible.sync="skuDialogFormVisible"
            :close-on-click-modal="false"
        >
            <div style="height:430px">
                <attr-key-list
                    v-if="skuDialogFormVisible"
                    ref="attrKeyList"
                    :row-classify-id="rowClassifyId"
                />
            </div>
        </el-dialog>
        <!--规格列表-->
        <el-dialog
            title="商品参数"
            width="60%"
            :modal-append-to-body="false"
            top="10vh"
            :visible.sync="spuDialogFormVisible"
            :close-on-click-modal="false"
        >
            <div style="height:430px">
                <spec-group-list
                    v-if="spuDialogFormVisible"
                    ref="specGroupList"
                    :row-classify-id="rowClassifyId"
                />
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import Pagination from '@/components/Pagination' // 分页栏信息
    import attrKeyList from '@/views/goodsattr/attrKey'
    import specGroupList from '@/views/goodsattr/specGroup'
    import {
        getJdGoodsInfoList,
        saveJdGoodsInfo,
        editJdGoodsInfo,
        deleteJdGoodsInfo
    } from '@/api/modules/goodsInfo'
    import CmUpload from '@/components/Upload'

    export default {
        name: '',
        components: {
            Pagination,
            CmUpload,
            attrKeyList,
            specGroupList
        },
        directives: {},
        filters: {},
        data() {
            return {
                options: [],
                tableKey: 0,
                tableList: [], // 表格数据源
                tableTotal: 0, // 表格总条数数据
                listLoading: true,
                pageRequest: {pageNum: 1, pageSize: 10},
                searchParam: {},
                dialogFormVisible: false, // 默认不显示弹出框
                skuDialogFormVisible: false, // 规格弹出窗
                spuDialogFormVisible: false, // 属性弹出窗
                operation: true, // true:新增, false:编辑
                editLoading: false, // 保存表单时loading框
                columns: [
                    {prop: 'name', label: '分类名称', sortable: false},
                    {
                        prop: 'icon',
                        label: '图标资源',
                        sortable: false,
                        imgFlag: true
                    },
                    {prop: 'orderNo', label: '排序号码', sortable: false}
                ],
                fileList: [],
                // 新增编辑界面数据
                dataForm: {},
                // 表单检验规则
                dataFormRules: {
                    name: [
                        {
                            required: true,
                            message: '请输入分类名称',
                            trigger: 'blur'
                        }
                    ]
                },
                rowClassifyId: ''
            }
        },
        mounted() {
            this.getGoodsName()
        },
        created() {
            this.getList()
        },
        methods: {
            // 获取表格数据
            getList() {
                this.listLoading = true

                // 【API请求】----获取表格列表数据
                getJdGoodsInfoList(this.pageRequest)
                    .then(response => {
                        this.tableList = response.result.content
                        this.tableTotal = response.result.total
                        this.listLoading = false
                    })
                    .catch(res => {
                        this.$message({message: res.msg, type: 'error'})
                    })
            },
            // 表格数据筛选
            handleFilter() {
                this.pageRequest.searchParam = this.searchParam
                this.getList()
            },
            // 【按钮点击】--- 弹出新增表单
            handleCreate() {
                this.operation = true
                this.initDataForm()
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false
                })
            },
            // 【按钮点击】--- 弹出编辑表单
            handleUpdate(row) {
                this.operation = false
                this.dataForm = Object.assign({}, row)
                // 显示编辑菜单
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false
                })
            },
            // 保存表单数据
            saveFormData() {
                let res
                this.$refs['dataForm'].validate(async valid => {
                    if (!valid) {
                        return false
                    }
                    this.editLoading = true
                    // 【API请求】----保存数据
                    if (this.dataForm.id === null || this.dataForm.id === '') {
                        res = await saveJdGoodsInfo(this.dataForm)
                    } else {
                        res = await editJdGoodsInfo(this.dataForm)
                    }
                    try {
                        if (res.code === 0) {
                            this.dialogFormVisible = false // 关闭表单页面
                            this.initDataForm() // 重置表单数据
                            this.getList() // 重新获取表格数据
                            this.$notify({
                                title: '成功',
                                message: '保存成功',
                                type: 'success',
                                duration: 2000
                            })
                        }
                        this.editLoading = false // 关闭loading框
                    } catch (e) {
                        throw e
                    }
                })
            },
            // 【按钮点击】---删除行
            handleDelete(row) {
                this.$confirm('确认删除该记录吗？', '提示', {})
                    .then(() => {
                        // 【API请求】---- 删除数据
                        deleteJdGoodsInfo(row.id).then(() => {
                            this.$message({message: '操作成功', type: 'success'})
                            this.getList()
                        })
                    })
                    .catch(() => {
                        this.$message({message: '操作失败', type: 'error'})
                    })
            },
            // 初始化表单数据，重新渲染
            initDataForm() {
                this.dataForm = {
                    id: '',
                    name: '',
                    pid: '',
                    icon: '',
                    orderNo: '',
                    remark: '',
                    createTime: '',
                    createUser: '',
                    updateTime: '',
                    updateUser: ''
                }
            },
            // 关闭表单弹出框
            closeDialog() {
                this.$refs['dataForm'].resetFields()
                this.dialogFormVisible = false
            },
            // 重置按钮
            searchReset() {
                this.searchParam = {}
                this.pageRequest = {pageNum: 1, pageSize: 10}
                this.getList()
            },
            getGoodsName() {
                getJdGoodsInfoList(this.pageRequest)
                    .then(response => {
                        console.log(response)
                        this.options = response.result.content
                        console.log(this.operation)
                    })
                    .catch(res => {
                        this.$message({message: res.msg, type: 'error'})
                    })
            },
            // 【按钮点击】--- 弹出规格设置
            skuSet(row) {
                // 显示编辑菜单
                console.log(row)
                this.rowClassifyId = row.id
                this.skuDialogFormVisible = true
            },
            // 【按钮点击】--- 弹出规格设置
            spuSet(row) {
                // 显示编辑菜单
                console.log(row)
                this.rowClassifyId = row.id
                this.spuDialogFormVisible = true
            }
        }
    }
</script>
